<template>
<el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>更换头像</span>
    </div>
    <div>
        <!-- 图片，用来展示用户选择的头像 -->
        <img class="the_img" src="../../assets/images/avatar.jpg" alt="" v-if="!avatar" />
        <img class="the_img" :src="avatar" alt="" v-else />

        <!-- 按钮区域 -->
        <div class="btn-box">
            <!-- <input type='file'/>的作用是弹出一个文件选择框,将其隐藏时为了点击选择图片的动作发生时才弹出来 -->
            <input type="file" accept="image/*" style="display: none" ref="iptRef" @change="onFileChange"  />
            <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
            <el-button type="success" icon="el-icon-upload" :disabled="avatar === ''" @click="uploadFn">上传头像</el-button>
        </div>
    </div>
</el-card>
</template>

<script>
import { updateUserAvatarAPI } from '@/api'
export default {
  name: 'UserAvatar',
  data () {
    return {
      avatar: '' // 链接/base64字符串
    }
  },
  methods: {
    // 选择图片的点击事件
    chooseImg () {
      // 目的:为了让<input type='file'/>标签,让他用JS代码来触发,弹出一个选择文件的窗口
    //   原因:<input type='file'/>是原生标签,样式不太好改   解决方法L移花接木
      this.$refs.iptRef.click() // 模拟用户点击事件
    },
    // 弹框选中图片后,点击确定的方法实现
    onFileChange (e) {
      const files = e.target.files // 拿到用户选择的文件数组(只有一个文件也是数组)
      if (files.length === 0) {
        // 证明刚刚打开了文件窗口,用户一个文件都没有选择就点击了确定,关闭了弹框
      } else {
        // 用户选择了文件(默认只能选择一个,如果需要选择多个需要给input添加额外的原生属性(multiple))
        // console.log(files[[0]])

        // 将获取到的地图放到头像展示区img上进行预览(纯前端预览的两种方式:链接和base64  能发给后台的就只有base64)
        // 但是src的值只能是地图的链接或base64字符串(格式: data:image/图片后缀;base64,图片转base64后的字符串)
        // 所以获取到的文件必须进行转换 ===> 链接   或  base64字符串
        // 解决方案1:   文件 ==>    内存临时地址(这个地址只能在js的内存里,不能发给后台(不推荐使用))
        // 语法:URL.createObjectURL(文件)
        // this.avatar = URL.createObjectURL(files[0])

        // 解决方案2:base64字符串(此字符串可以发送给后台)
        const fr = new FileReader() // 创建一个文件阅读对象
        fr.readAsDataURL(files[0]) // 使用  对象.readAsDataURL(文件)API方法将文件转化为base64
        fr.onload = (e) => { // onload方法是等待文件读成base64字符串完成之后会触发的事件函数(接收事件对象e)
          // e.target.result就是读取的结果
        //   console.log(e.target.result)
          this.avatar = e.target.result
        }
      }
    },
    // 上传用户头像的点击事件
    async uploadFn () {
      const { data: res } = await updateUserAvatarAPI(this.avatar)
      if (res.code !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      // 让vuex中的获取用户信息的方法再次调用一次,将更新的信息存入state中
      this.$store.dispatch('getUserInfoActions')
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
    margin-top: 10px;
}

.preview {
    object-fit: cover;
}

.the_img {
    width: 350px;
    height: 350px;
}
</style>
